
header{position: fixed;width: 100%;background: rgba(255,255,255,0.6);z-index: 88;}
header .head_box{width: 80%;height: 1.8rem;margin: 0 auto;}
header .head_box .logo{width: 6rem;margin-top: 0.5rem;}
header .head_box nav{float: right;position: relative;}
header .head_box nav ul{float: left;}
header .head_box nav ul li{float: left;}
header .head_box nav ul li a{float: left;padding: 0.6rem 1rem 0 0;font-size: 0.48rem;color: #000;}
header .head_box nav ul li a:nth-of-type(2){display: inline-block;height:1.2rem;}

header .head_box nav .dcode_nav{position: absolute;top: 115%;left:9%;width: 30%;display: none;}
header .head_box nav a:nth-of-type(7){padding-right: 0;}
header .head_box .title-nav{display: none;width: 1.4rem;height: 1rem;position:absolute;right:5%;top:0.38rem;}
header .head_box .none-line{width: 100%;height: 1px;background: #000;position: absolute;top: 2rem;display: none;}
header .head_box .none_nav{width: 100%;padding-top: 1rem;padding:1.5rem 0.5rem;display: none;}
header .head_box .none_nav a{width: 100%;display: inline-block;font-size: 0.48rem;padding: 0.8rem 1rem 0 0;color: #000;}
header .head_box .none_nav .dcode_none_nav{width:4rem;display: none;position: absolute;}

header .head_box nav .none-join{position: absolute;right: 1rem;bottom:-1.6rem;background: url(../img/多边形.png) no-repeat;width: 4.7rem; height: 1.5rem;display: none;}
header .head_box nav .none-join a{float: left;color: #000;padding: 0;margin-top: 0.55rem;margin-left: 0.3rem;}

.content { width: 100%;}
.content .show_img { width: 100%;}
.content .show_img li:nth-of-type(1) img { width: 100%;}

.content .show_img li:nth-of-type(2) { width: 100%; background: rgb(255,255,255); border-bottom: 1px solid rgb(204,204,204); text-align: center;}
.content .show_img li:nth-of-type(2) img { width: 50%;}

.content .show_img li:nth-of-type(3) { width: 100%; border-bottom: 1px solid rgb(204,204,204);}
.content .show_img li:nth-of-type(3) img { width: 100%;}

.content .show_img li:nth-of-type(4) { position: relative; width: 100%;}
.content .show_img li:nth-of-type(4) .synopsis { margin: 5% 0 0 5%; width: 45%;}
.content .show_img li:nth-of-type(4) .synopsis  b { display: inline-block; font-size: 2rem; color: rgb(138,246,210); vertical-align: top;}
.content .show_img li:nth-of-type(4) .synopsis .synopsis_con { display: inline-block;}
.content .show_img li:nth-of-type(4) .synopsis .synopsis_con p { font-size: 0.8rem; color: rgb(71,82,82);}
.content .show_img li:nth-of-type(4) .synopsis .synopsis_con p span { color: rgb(138,246,210);}
.content .show_img li:nth-of-type(4) img { position: absolute; top: 45%; left: 0%;width: 100%;}

.content .show_img li:nth-of-type(5) { width: 100%; border-bottom: 1px solid rgb(204,204,204);}
.content .show_img li:nth-of-type(5) .line_wrap { margin: 15% auto 5%; width: 40rem;}
.content .show_img li:nth-of-type(5) .line_wrap .line_coffee { width: 100%;}
.content .show_img li:nth-of-type(5) .line_wrap .line_coffee img { vertical-align: top; width: 40%;}
.content .show_img li:nth-of-type(5) .line_wrap .line_coffee .line_synopsis { margin-left: 8%; display: inline-block; width: 50%;}
.content .show_img li:nth-of-type(5) .line_wrap .line_coffee .line_synopsis p:nth-of-type(1) { font-size: 0.8rem; font-weight: bold; color: rgb(51,51,51);}
.content .show_img li:nth-of-type(5) .line_wrap .line_coffee .line_synopsis p:nth-of-type(1) span { color: rgb(135,204,213);}
.content .show_img li:nth-of-type(5) .line_wrap .line_coffee .line_synopsis p:nth-of-type(2) { margin: 8% 0; font-size:0.6rem; color:rgb(189,187,198);}
.content .show_img li:nth-of-type(5) .line_wrap .line_coffee .line_synopsis p:nth-of-type(3) { margin: 8% 0; font-size:0.6rem; color:rgb(189,187,198);}

.content .show_img li:nth-of-type(5) .line_wrap .sales div { margin: 0 1%; display: inline-block; vertical-align: top;}
.content .show_img li:nth-of-type(5) .line_wrap .sales .sales_img { width: 30%;}
.content .show_img li:nth-of-type(5) .line_wrap .sales .sales_img img { width: 100%;}
.content .show_img li:nth-of-type(5) .line_wrap .sales .sales_img p { font-size: 0.6rem; color: rgb(89,51,51); margin-top: 10%; text-align: center;}
.content .show_img li:nth-of-type(5) .line_wrap .sales .sales_img p span { color: rgb(135,204,213);}

.content .show_img li:nth-of-type(5) .line_wrap .sales .sales_March { width: 15%; border-bottom: 0.6rem solid rgb(224,224,224);} 
.content .show_img li:nth-of-type(5) .line_wrap .sales .sales_March span { font-size: 1.5rem; color:rgb(135,204,213); font-weight: bold; display: inline-block; text-align: center; width: 100%;}
.content .show_img li:nth-of-type(5) .line_wrap .sales .sales_March p { font-size: 0.5rem; color: rgb(172,170,172); margin: 48% 0;}

.content .show_img li:nth-of-type(5) .line_wrap .sales .sales_June { width: 26%; border-bottom: 0.6rem solid rgb(224,224,224);}
.content .show_img li:nth-of-type(5) .line_wrap .sales .sales_June span { font-size: 1.5rem; color:rgb(135,204,213); font-weight: bold; display: inline-block; text-align: center; width: 100%;}
.content .show_img li:nth-of-type(5) .line_wrap .sales .sales_June p { font-size: 0.5rem; color: rgb(172,170,172); margin: 22.5% 0;}

.content .show_img li:nth-of-type(5) .line_wrap .sales .sales_more { width: 18%; border-bottom: 0.6rem solid rgb(224,224,224);}
.content .show_img li:nth-of-type(5) .line_wrap .sales .sales_more span { font-size: 1.5rem; color:rgb(135,204,213); font-weight: bold; display: inline-block; text-align: center; width: 100%;}
.content .show_img li:nth-of-type(5) .line_wrap .sales .sales_more p { font-size: 0.5rem; color: rgb(172,170,172); margin: 42.5% 0;}

.content .show_img li:nth-of-type(6) .join_us { width: 40rem; margin: 5% auto 0;}
.content .show_img li:nth-of-type(6) .join_us .join_summary { margin-bottom: 3%; width: 100%;}
.content .show_img li:nth-of-type(6) .join_us .join_summary img { width: 68%;}
.content .show_img li:nth-of-type(6) .join_us .join_summary .summary_word { width: 12%; text-align: center; display: inline-block; vertical-align: top;  margin-left: 15%;}
.content .show_img li:nth-of-type(6) .join_us .join_summary .summary_word p:nth-of-type(1){ font-size: 2rem; font-weight: bold; color: rgb(135,204,213); padding: 0 2% 15%; border-bottom: 5px solid rgb(204,204,204);}
.content .show_img li:nth-of-type(6) .join_us .join_summary .summary_word p:nth-of-type(2){ font-size: 0.8rem; margin: 5% 0 1%;}
.content .show_img li:nth-of-type(6) .join_us .join_summary .summary_word p:nth-of-type(3){ font-size: 0.5rem;}

.content .show_img li:nth-of-type(6) .join_us .raw_materials { width: 100%;}
.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_left{ margin-left: 3%; display: inline-block; width: 10%;}
.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_left p:nth-of-type(1) { padding: 7%; background: rgb(135,204,213); color: white; font-size: 0.7rem; width: 21%; border-radius: 3px; text-align: center;}
.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_left p:nth-of-type(2) {margin-top: 8%; font-size: 1rem; color: rgb(135,204,213); font-weight: bold;}
.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_left p:nth-of-type(3) { font-size: 1.5rem; font-weight: bold; color: rgb(135,204,213);}
.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_left img { margin: 20% 0 0 26%; width: 30%;}

.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_right { margin: 10% 0 2% 2%; display: inline-block; vertical-align: top; width: 84%;}
.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_right img{ vertical-align: top; width: 45%;}
.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_right .raw_channel { margin-left: 14%; width: 37%; display: inline-block;}
.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_right .raw_channel p:nth-of-type(1) { font-size: 0.9rem; font-weight: bold; border-bottom: 5px solid rgb(224,224,224); width: 44%; margin-left: 52%; color: rgb(119,119,119); padding-bottom: 2%;}
.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_right .raw_channel p:nth-of-type(2) { color: rgb(170,170,175); font-size: 0.5rem; margin-top: 6%; line-height: 0.7rem;}

.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_right .consultant { margin-top: 3%; width: 50%; display: inline-block;}
.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_right .consultant .img_wrap{ width: 45%; display: inline-block; vertical-align: top;}
.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_right .consultant .img_wrap p:nth-of-type(1) { font-size: 0.6rem; color: rgb(135,204,213); margin-bottom: 2%;}
.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_right .consultant .img_wrap img { width: 90%;}
.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_right .consultant .consultant_con{ margin: 5% 0 0 3%; width: 42%; display: inline-block;}
.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_right .consultant .consultant_con p { color: rgb(187,187,187); font-size: 0.5rem;}
.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_right .consultant .consultant_con p:nth-of-type(3) { padding: 0;}
.content .show_img li:nth-of-type(6) .join_us .raw_materials .raw_right .raw_right_img { margin: 5% 0; width: 40%;}

.content .show_img li:nth-of-type(6) .join_us .training { margin-top: 5%; width: 100%;}
.content .show_img li:nth-of-type(6) .join_us .training .training_left { margin-left: 3%; display: inline-block; width: 10%; vertical-align: top;}
.content .show_img li:nth-of-type(6) .join_us .training .training_left p:nth-of-type(1) { padding: 7%; background: rgb(135,204,213); color: white; font-size: 0.7rem; width: 21%; border-radius: 3px; text-align: center;}
.content .show_img li:nth-of-type(6) .join_us .training .training_left p:nth-of-type(2) {margin-top: 8%; font-size: 0.7rem;; color: rgb(135,204,213); font-weight: bold;}
.content .show_img li:nth-of-type(6) .join_us .training .training_left p:nth-of-type(3) { font-size: 1.5rem; font-weight: bold; color: rgb(135,204,213);}
.content .show_img li:nth-of-type(6) .join_us .training .training_left img { margin: 26% 0 0 26%; width: 20%;}

.content .show_img li:nth-of-type(6) .join_us .training .training_right { display: inline-block; width:  80%; margin: 10% 0 0 6%;}
.content .show_img li:nth-of-type(6) .join_us .training .training_right img:nth-of-type(1) { width: 25%;}
.content .show_img li:nth-of-type(6) .join_us .training .training_right .training_word{ display: inline-block; width: 69%; margin-left: 5%; vertical-align: top;}
.content .show_img li:nth-of-type(6) .join_us .training .training_right .training_word .training_word_left { display: inline-block; width: 50%; margin-bottom: 7%;}
.content .show_img li:nth-of-type(6) .join_us .training .training_right .training_word .training_word_left p:nth-of-type(1){ font-size: 0.7rem; font-weight: bold; margin-bottom: 10%; color: rgb(135,204,213);}
.content .show_img li:nth-of-type(6) .join_us .training .training_right .training_word .training_word_left p:nth-of-type(2),p:nth-of-type(3){ font-size: 0.5rem; color: rgb(204,204,204);}
.content .show_img li:nth-of-type(6) .join_us .training .training_right .training_word .training_word_right { display: inline-block; vertical-align: top; padding-bottom: 2%; margin-left: 30%; font-size: 0.8rem; font-weight: bold; color: rgb(51,51,51); border-bottom: 6px solid rgb(224,224,224);}
.content .show_img li:nth-of-type(6) .join_us .training .training_right img { width: 46%; margin-right: 3%;}

.content .show_img li:nth-of-type(6) .join_us .orders { margin-top: 5%; width: 100%;}
.content .show_img li:nth-of-type(6) .join_us .orders .orders_left { margin-left: 3%; display: inline-block; width: 10%; vertical-align: top;}
.content .show_img li:nth-of-type(6) .join_us .orders .orders_left p:nth-of-type(1) { padding: 7%; background: rgb(135,204,213); color: white; font-size: 0.8rem; width: 21%; border-radius: 3px; text-align: center;}
.content .show_img li:nth-of-type(6) .join_us .orders .orders_left p:nth-of-type(2) {margin-top: 8%; font-size: 0.7rem;; color: rgb(135,204,213); font-weight: bold;}
.content .show_img li:nth-of-type(6) .join_us .orders .orders_left p:nth-of-type(3) { font-size: 1.5rem; font-weight: bold; color: rgb(135,204,213);}
.content .show_img li:nth-of-type(6) .join_us .orders .orders_left img { margin: 26% 0 0 26%; width: 20%;}

.content .show_img li:nth-of-type(6) .join_us .orders .orders_right { width: 80%; margin: 10% 0 0 6%; display: inline-block;}
.content .show_img li:nth-of-type(6) .join_us .orders .orders_right .orders_word p { display: inline-block;}
.content .show_img li:nth-of-type(6) .join_us .orders .orders_right .orders_word p:nth-of-type(1) { color: rgb(172,170,172); width: 41%; font-size: 0.5rem; line-height: 0.6rem;}
.content .show_img li:nth-of-type(6) .join_us .orders .orders_right .orders_word p:nth-of-type(2) { vertical-align: top; width: 13.5%; font-size: 0.7rem; padding-bottom: 1%; border-bottom: 0.2rem solid rgb(224,224,224); margin-left: 43%; font-weight: bold;}
.content .show_img li:nth-of-type(6) .join_us .orders .orders_right .orders_img{margin-top: 7%;}
.content .show_img li:nth-of-type(6) .join_us .orders .orders_right .orders_img img { margin-right: 7%; width: 17%;}

.content .show_img li:nth-of-type(6) .join_us .logistics { position: relative; margin: 5% 0; width: 100%;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_left { margin-left: 3%; display: inline-block; width: 50%; vertical-align: top;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_left p:nth-of-type(1) { padding: 2%; background: rgb(135,204,213); color: white; font-size: 0.8rem; width: 5%; border-radius: 3px; text-align: center;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_left p:nth-of-type(2) {margin-top: 2%; font-size: 0.7rem;; color: rgb(135,204,213); font-weight: bold;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_left p:nth-of-type(3) { font-size: 1.5rem; font-weight: bold; color: rgb(135,204,213);}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_left img { margin-top: 3%; width: 100%;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right { width: 80%; position: absolute; top: 15%; left: 21%; padding-bottom: 5%; border-bottom: 0.05rem solid rgb(224,224,224);}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .logistics_word p { display: inline-block;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .logistics_word p:nth-of-type(1) { color: rgb(172,170,172); width: 46%; font-size: 0.5rem; line-height: 0.8rem;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .logistics_word p:nth-of-type(2) { vertical-align: top; width: 9%; font-size: 0.7rem; padding-bottom: 1%; border-bottom: 0.2rem solid rgb(224,224,224); margin-left: 41%; font-weight: bold;}

.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .had_address_wrap{ margin-top: 5%; width: 40%; display: inline-block;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .had_address_wrap img { width: 17%;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .had_address_wrap span { font-size: 0.7rem; font-weight: bold; margin: 10% 0;  display: inline-block;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .had_address_wrap p { font-size: 0.5rem; color: rgb(172,170,172);}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .had_address_wrap div { display: inline-block; vertical-align: top;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .had_address_wrap .had_address { line-height: 0.7rem; margin-left: 4%;}

.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .comming_address_wrap { display: inline-block; vertical-align: top; margin: 5% 0 0 10%;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .comming_address_wrap  .comming_word { margin-top: 3%; line-height: 1rem;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .comming_address_wrap  .comming_word p { font-size: 0.7rem; color: rgb(135,204,213);}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .comming_address_wrap span { font-size: 0.7rem; font-weight: bold; margin: 10% 0;  display: inline-block;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .comming_address_wrap p { font-size: 0.5rem; color: rgb(172,170,172);}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .comming_address_wrap div { display: inline-block; vertical-align: top;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .comming_address_wrap .had_address { line-height: 0.7rem; margin-left: 10%;}

.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .promotion{ margin-top: 10%; width: 50%; float: right;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .promotion p:nth-of-type(1) { font-size: 0.7rem; padding-bottom: 2%; border-bottom: 0.2rem solid rgb(224,224,224); width: 19%; margin-left: 80%;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .promotion p:nth-of-type(2) { font-size: 0.5rem; color: rgb(172,170,172); margin-top: 3%; line-height: 0.7rem;}

.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .end_word{ line-height: 0.7rem; width: 60%; float: right; margin-top: 24%;}
.content .show_img li:nth-of-type(6) .join_us .logistics .logistics_right .end_word p { font-size: 0.5rem; color: rgb(172,170,172);}

.content .join_us .contect { margin: 14% 0 6%; width: 100%; text-align: center;}
.content .join_us .contect span:nth-of-type(1) { font-size: 0.8rem;}
.content .join_us .contect img { margin: 0 -0.5% 0 1%; width: 2%;}
.content .join_us .contect span:nth-of-type(2) { font-size: 0.5rem;}

footer{width: 100%;background: #303030;text-align: center;margin-top: 2.5rem;}
footer img{width: 2.67rem;padding: 1rem;}
.footer-message{font-size: 0.45rem;text-align: center;margin-top: 0.2rem;}

@media only screen and (min-width: 100px) and (max-width: 830px) {
	header .head_box nav{display: none;}
	header .head_box{width: 100%;}
	header .head_box .title-nav{display: block;}
	header .head_box .logo{float: left;padding-left: 0.2rem;}
}










